import { $ } from './library/jquery-module.js';
import './library/jquery-extend-tabs.js';
import './library/jquery-extend-magnifier.js';
import './library/jquery-extend-list-slider.js';
import cookie from './library/cookie.js';
// import { parse } from 'cookie';

// 商品详情页渲染
let goodsid = location.search.split('=')[1];
$.ajax({
    async: false,
    type: "get",
    url: "../../interface/goods.php",
    data: { goodsid },
    dataType: "json",
    success: function(res) {
        let temp = '';
        let pics = JSON.parse(res.picture);
        let goodstitle = JSON.parse(res.title);
        let goodstype = JSON.parse(res.type);
        let goodsstock = parseInt(res.num);
        window.goodsstock = goodsstock;
        temp = `<div class="good-appear">
                    <div class="good-img">
                        <div class="good-img-magni">
                            <img src="../${pics[0].src}" />
                            <div class="good-slide"></div>
                        </div>
                        <ul class="good-img-list">
                            <li class="selected"><img src="../${pics[0].src}" /></li>
                            <li><img src="../${pics[1].src}" /></li>
                            <li><img src="../${pics[2].src}" /></li>
                            <li><img src="../${pics[3].src}" /></li>
                        </ul>
                        <div class="magnifier-img">
                            <img class="big-img" src="../${pics[0].src}" />
                        </div>
                    </div>
                    <div class="good-collect">
                        <i class="iconfont">&#xe75a;</i>
                        <span>收藏商品</span>
                        <span>（169775人气）</span>
                    </div>
                </div>
                <div class="good-detail">
                    <div class="good-name">
                        <h1>
                            ${goodstitle[0].name}
                        </h1>
                        <p>
                            ${goodstitle[1].function}</p>
                    </div>
                    <div class="good-price">
                        <span>价格</span>
                        <span>￥</span>
                        <span>${res.price}</span>
                    </div>
                    <div class="good-send-addr">
                        <span>运费</span>
                    </div>
                    <div class="good-evaluate">
                        <span>累计评价</span>
                        <span>9359</span>
                    </div>
                    <div class="good-choose">
                        <div class="good-version">
                            <span class="title">
                                化妆品净含量
                            </span>
                            <div class="good-cap">
                                <div class="good-p">
                                    <span class="goods-volume choosen">
                                        <span>${goodstype[0]}</span>
                                        <img src="../img/goods-selected.png" alt="">
                                    </span>
                                </div>
                                <div class="good-p">
                                    <span class="goods-volume unchoosen">
                                        <span>${goodstype[1]}</span>
                                        <img src="../img/goods-selected.png" alt="">
                                    </span>
                                </div>
                                <!-- <div class="good-p">
                                    <span class="goods-volume unchoosen">
                                        200ml新条码
                                        <img src="../img/goods-selected.png" alt="">
                                    </span>
                                </div> -->
                            </div>
                        </div>
                        <div class="good-buy-count">
                            <span class="title">
                                数量
                            </span>
                            <input type="text" value="1" id="goods-num" class="good-num">
                            <span class="control-count">
                                <i class="iconfont add-num" >&#xe7c1;</i>
                                <i class="iconfont reduce-num ">&#xe7c3;</i>
                            </span>
                            <span>
                                件
                            </span>
                        </div>
                        <div class="buy-ways clearfloat">
                            <div class="buy-now">
                                <span>
                                    立即购买
                                </span>
                            </div>
                            <div class="buy-later">
                                <span id="add-trolley">
                                    <i class="iconfont">&#xe6aa;</i> 加入购物车
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="service-pro clearfloat">
                        <span class="title">
                            服务承诺
                        </span>
                        <ul class="pro-list">
                            <li>
                                <a href="#">过敏包退</a>
                            </li>
                            <li>
                                <a href="#">破损包退</a>
                            </li>
                            <li>
                                <a href="#">正品保障</a>
                            </li>
                            <li>
                                <a href="#">进口保税</a>
                            </li>
                            <li>
                                <a href="#">赠运费险</a>
                            </li>
                        </ul>
                        <span class="pay-ways">
                            支付方式
                        </span>
                    </div>
                    <div class="buy-warn">
                        检测到您当前处于非安全网络环境，部分商品信息可能不准确，请在交易支付页面再次确认商品价格信息。
                    </div>
                </div>`

        $('.good-msg').append(temp).find('#add-trolley').on('click', function() {
            addItem(res.id, res.price, $('#goods-num').val(), $('.choosen').children('span').html());
            // console.log($('.choosen').children('span').html());
        });
    }
});

// 加入购物车的商品id 价格 数量 型号
function addItem(id, price, num, edition) {
    let trolley = cookie.get('trolley');
    let goods = {
        id,
        price,
        num,
        edition
    }

    if (trolley) {
        trolley = JSON.parse(trolley);
        // 判断当前所选商品id和型号在cookie中是否已存在
        let flag = trolley.some(function(elm) {
            return elm.id == id && elm.edition == edition;
        });
        if (flag) {
            trolley.forEach(function(elm) {
                elm.id == goods.id && elm.edition == goods.edition ? elm.num = parseInt(elm.num) + parseInt(num) : null;
            });
        } else {
            trolley.push(goods);
        }

    } else {
        // 没有存cookie的情况
        trolley = []; //初始化成数组
        trolley.push(goods);
    }
    cookie.set('trolley', JSON.stringify(trolley), 1);
}

// 放大镜
$('.good-img').magnifier();

// 选购商品类型
$('.good-cap>.good-p').on('click', 'span', function() {
    $(this).removeClass('unchoosen').addClass('choosen');
    $(this).parent().siblings().children('span').removeClass('choosen').addClass('unchoosen');
});

// 选购商品数量输入
$('.good-num').on('change', function() {
    let innum = $(this).val();
    if (parseInt(innum) < 1 || !parseInt(innum)) {
        $(this).val(1);
    } else if (parseInt(innum) > goodsstock) {
        alert('超出库存数量，请重新选择');
        $(this).val(goodsstock);
        num = parseInt(innum);
    } else {
        $(this).val(parseInt(innum));
        num = parseInt(innum);
    }
});

// 选购商品数量
let num = $('.good-num').val();
$('.add-num').on('click', function() {
    num++;
    if (num > goodsstock) {
        num = goodsstock;
        alert('超出库存数量，请重新选择');
    }
    $('.good-num').val(num);
});

$('.reduce-num').on('click', function() {
    num--;
    if (num < 1) {
        num = 1;
    }
    $('.good-num').val(num);
});

// 看了又看
$('.buy-more-goods').slider();

// 商品详请、累计评价、服务详请切换
$('.shop-good-intro').tabs({
    ev: 'click',
    active: 'active',
    show: 'show'
});
// 宝贝排行切换
$('.goods-ranking').tabs({
    ev: 'mouseover',
    active: 'active',
    show: 'show'
});